<template>
  <div>
    <el-select v-model="query_data.value" placeholder="画布大小" @change="changeWidth">
      <el-option
        v-for="(item, index) in query_data.list"
        :key="item.name"
        :label="item.name"
        :value="index"
      >
      </el-option>
    </el-select>

    <common-echarts
      :option="option"
      ref="echarts"
      :height="height"
      :width="width"
    ></common-echarts>
  </div>
</template>

<script>
import CommonEcharts from "@/components/echarts/echarts.vue";

export default {
  name: "MediaEcharts",
  components: {
    CommonEcharts,
  },
  computed: {
    option() {
      let series = [
        {
          type: "pie",
          data: [
            { value: 10, name: "pie-a" },
            { value: 50, name: "pie-b" },
            { value: 30, name: "pie-c" },
            { value: 20, name: "pie-d" },
          ],
        },
        {
          type: "pie",
          data: [
            { value: 30, name: "pie-a" },
            { value: 50, name: "pie-b" },
            { value: 15, name: "pie-c" },
            { value: 25, name: "pie-d" },
          ],
        },
      ];

      return {
        //基础option
        baseOption: {
          title: { text: "环形图", x: "center" },
          subtext: "响应式图",
          legend: { data: ["pie-a", "pie-b", "pie-c", "pie-d"] },
          series,
        },
        //自适应选项
        media: [
          {
            //当长宽比大于1
            query: {
              // query中为条件
              minAspectRatio: 1,
            },
            option: {
              //图例水平放置
              legend: { right: "center", bottom: 0, orient: "horizontal" },
              series: [
                //两个圆环图y方向相同
                { radius: [30, "40%"], center: ["25%", "50%"] },
                { radius: [30, "40%"], center: ["75%", "50%"] },
              ],
            },
          },
          {
            //当长宽比小于等于1
            query: { maxAspectRatio: 1 },
            option: {
              //图例竖直放置
              legend: { right: "center", bottom: 0, orient: "vertical" },
              series: [
                //两个圆环图x方向相同
                { radius: [30, "40%"], center: ["50%", "30%"] },
                { radius: [10, "40%"], center: ["50%", "70%"] },
              ],
            },
          },
          {
            query: {
              //小于等于800的宽度时，执行该option设置
              maxWidth: 400,
            },
            option: {
              legend: { right: 10, top: "15%", orient: "vertical" },
              series: [
                { radius: [10, "40%"], center: ["50%", "30%"] },
                { radius: [30, "40%"], center: ["50%", "75%"] },
              ],
            },
          },
          {
            // 默认
            //注意这个option没有query选项，
            //即当以上query都不满足时，执行如下option设置
            option: {
              legend: { right: "center", bottom: 0, orient: "horizontal" },
              series: [
                { radius: [0, "40%"], center: ["25%", "50%"] },
                { radius: [10, "40%"], center: ["75%", "50%"] },
              ],
            },
          },
        ],
      };
    },
  },
  data() {
    return {
      query_data: {
        list: [
          {
            name: "长宽比大于1",
            width: 600,
            height: 300,
          },
          {
            name: "长宽比小于1",
            width: 401,
            height: 402,
          },
          {
            name: "最大宽度小于400",
            width: 400,
            height: 400,
          },
          {
            name: "默认",
            width: 401,
            height: 401,
          },
        ],
        value: 0,
      },
      echarts: null,
      width: 600,
      height: 300,
    };
  },
  mounted() {},
  methods: {
    changeWidth() {
      const myChart = this.$refs.echarts.getChart();
      myChart.showLoading();

      const { value, list } = this.query_data;
      const { width, height } = list[value];

      setTimeout(() => {
        //异步加载数据
        myChart.hideLoading();
        //数据加载完成后隐藏动画

        this.width = width;
        this.height = height;

        // this.$nextTick(myChart.resize);
        setTimeout(myChart.resize);
      }, 1000);
    },
  },
};
</script>
